﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.6.min.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="build/reset-fonts-grids/reset-fonts-grids.css" />
    <link rel="stylesheet" type="text/css" href="build/resize/assets/skins/sam/resize.css" />
    <link rel="stylesheet" type="text/css" href="build/layout/assets/skins/sam/layout.css" />
    <link rel="stylesheet" type="text/css" href="build/assets/skins/sam/accordionview.css" />
    <link rel="stylesheet" type="text/css" href="build/treeview/assets/skins/sam/treeview.css" />
    <link rel="stylesheet" type="text/css" href="build/treeview/assets/css/folders/tree.css">
    <link rel="stylesheet" type="text/css" href="build/tabview/assets/skins/sam/tabview.css" />

    <script type="text/javascript" src="build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="build/treeview/treeview-min.js"></script>
    <script type="text/javascript" src="build/element/element-min.js"></script>
    <script type="text/javascript" src="build/tabview/tabview-min.js"></script>
    <script type="text/javascript" src="build/utilities/utilities.js"></script>
    <script type="text/javascript" src="build/container/container-min.js"></script>
    <script type="text/javascript" src="build/resize/resize-min.js"></script>
    <script type="text/javascript" src="build/layout/layout-min.js"></script>

    <style type="text/css">
        .yui-navset button {
            position:absolute;
            top:0;
            right:0;
        }
        . yui-main
        {
            width:100%;
            margin:0px;
            height:100%;
        }
        
        .yui-main div
        {
            width:100%;
            height:100%;
            margin:0px;
        }
        html, body {
           height:100%; margin:0;
        }
        #demo, 
        #demo  .yui-navset, 
        #demo .yui-content  
        {
            height:100%; 
        }
        #demo .yui-content div 
        {
            height:100%; 
        }
        
    </style>
</head>
<body class="yui-skin-sam">

<div id="top"><p></p></div>

<div id="left" style="height:100%">
    <div id="wrapper">
        <ul id="mymenu">
            <li>
                <h3>Name</h3>
                <div>
                    <div id="treeDiv1" style="background:#ffffff"></div>
                </div>
            </li>
        </ul>
    </div>
    <script src="build/accordionview/accordionview/accordionview.js" type="text/javascript"></script>
</div>

<div id="center"> 
<div id="demo">
    <ul class="yui-nav">
        <li class="selected"><a href="#"><em>我的主页</em></a></li>
    </ul>            
    <div class="yui-content">
        <div id="tab2" >
            <iframe src="#"></iframe>
        </div>
    </div>
</div>
<script type="text/javascript">
    //生成tabs
    (function () {
        var tabView = new YAHOO.widget.TabView('demo');
        var button = document.createElement('button');
        button.innerHTML = '删除Tab';
        YAHOO.util.Event.on(button, 'click', removeTabs);
        tabView.appendChild(button);
    })();
    //添加tab
    function addTabs(title) {
        var tabView = new YAHOO.widget.TabView('demo');
        var labelText = "<div>"+title + '<span class="close" onclick="javascript:removeTabs();">X</span></div>';
        var content = "<iframe src='#' style='width:100%; height:100%' frameborder=0></iframe>";
        if (labelText && content) {
            tabView.addTab(new YAHOO.widget.Tab({ label: labelText, content: content, active: true }));
        }
    }
    //删除tab
    function removeTabs() {
        var tabView = new YAHOO.widget.TabView('demo');
        var removeTab = tabView.removeTab(tabView.get('activeTab'));
        YAHOO.util.Event.on('Remove', 'click', removeTab);
    }
</script>
</div>



<script type="text/javascript">
    (function () {
        var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;
        //布局
        Event.onDOMReady(function () {
            var layout = new YAHOO.widget.Layout({
                units: [
                { position: 'top', height: 60, body: 'top', gutter: '1', scroll: null, zIndex: 2 },
                { position: 'left', header: 'Left', width: 210, body: 'left', gutter: '1 2 1 1', collapse: true, scroll: true, zIndex: 1, resize: true },
                { position: 'center', body: 'center', gutter: '1 1 1 2', scroll: true }
            ]
            });
            layout.render();
        });

        //生成菜单
        var menu1 = new YAHOO.widget.AccordionView('mymenu', {
            collapsible: true,
            width: '100%',
            expandItem: 0,
            animationSpeed: '0.1',
            animate: false
        });
        //生成树形菜单
        var tree;
        function treeInit() {
            tree = new YAHOO.widget.TreeView("treeDiv1", [
			    { type: 'HTML', html: '<a onclick="addTabs(this.title)" style="cursor:hand" title="YUI">YUI</a>' },
			    { type: 'Text', label: 'branch 1', title: 'branch 1',
			        children: [{ type: 'HTML', html: '<a onclick="addTabs(this.title)" style="cursor:hand" title="YUI">YUI</a>' },
                               { type: 'HTML', html: '<a onclick="addTabs(this.title)" style="cursor:hand" title="YUIS">YUIS</a>' }
			        ]
			    },
                { type: 'Text', label: 'branch 2', title: 'branch 2',
                    children: [{ type: 'HTML', html: '<a onclick="addTabs(this.title)" style="cursor:hand" title="YUI">YUI</a>' }
			        ]
                }
		    ]).render();
        }
        YAHOO.util.Event.onDOMReady(treeInit);
    })();
</script>

</body>
</html>
